<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>后台管理</title>
	<script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 font-sans leading-normal tracking-normal">
	<header class="flex items-center justify-between bg-blue-600 text-white h-16 px-6">
		<h1 class="text-xl font-bold">后台管理</h1>
	</header>
	<nav class="bg-gray-200 w-48 h-full flex flex-col justify-between fixed">
		<div class="p-4">
			<ul>
				<li>
					<a href="#"
						class="block py-2 px-4 text-blue-600 hover:bg-blue-400 hover:text-white transition duration-300 rounded-md">首页</a>
				</li>
				<li>
					<a href="#"
						class="block py-2 px-4 text-blue-600 hover:bg-blue-400 hover:text-white transition duration-300 rounded-md"
						id="model-btn">模型管理</a>
				</li>
				<li>
					<a href="#"
						class="block py-2 px-4 text-blue-600 hover:bg-blue-400 hover:text-white transition duration-300 rounded-md"
						id="data-btn">数据管理</a>
				</li>
				<li>
					<a href="#"
						class="block py-2 px-4 text-blue-600 hover:bg-blue-400 hover:text-white transition duration-300 rounded-md">设置</a>
				</li>
			</ul>
		</div>
	</nav>
	<div class="content ml-48 p-6">
		<h2 id="tableTitle"></h2>
		<table id="table" class="w-full border-collapse">
			<thead>
			</thead>
			<tbody></tbody>
		</table>
	</div>
	<script>
		const modelBtn = document.querySelector('#model-btn')
		const dataBtn = document.querySelector('#data-btn')
		const table = document.querySelector('#table')
		const tableTitle = document.querySelector('#tableTitle')

		function renderTable(data, columns) {
			const tbody = table.querySelector('tbody')
			const thead = table.querySelector('thead')
			const ths = columns.map((column) => `<th class="border px-4 py-2">${column}<br><input type="text" class="filter-input"></th>`).join('')
			const trs = data.map((item) => {
				let tds = ''
				for (let key in item) {
					if (item.hasOwnProperty(key)) {
						tds += `<td class="border px-4 py-2">${item[key]}</td>`
					}
				}
				return `<tr class="table-row hover:bg-gray-200">${tds}</tr>`
			}).join('')
			thead.innerHTML = `<tr class="bg-gray-200">${ths}</tr>`
			tbody.innerHTML = trs

			// 添加筛选框并监听输入事件
			const filterInputs = table.querySelectorAll('.filter-input')
			filterInputs.forEach((input, index) => {
				input.addEventListener('input', function () {
					const filters = Array.from(filterInputs).map((input) => input.value.trim().toLowerCase())
					filterTable(filters)
				})
			})

			const rows = document.querySelectorAll('table tbody tr')

			rows.forEach(row => {
				row.addEventListener('contextmenu', e => {
					e.preventDefault()
					const menu = document.createElement('div')
					menu.classList.add('bg-white', 'border', 'border-gray-500', 'p-2', 'shadow-md', 'absolute', 'z-10')

					// 设置右键菜单的内容
					menu.innerHTML = '自定义右键菜单'
					console.log(menu);
					document.body.appendChild(menu)
					menu.style.top = `${e.clientY}px`
					menu.style.left = `${e.clientX}px`

					const hideMenu = () => {
						menu.remove()
						document.removeEventListener('click', hideMenu)
					}

					const handleOutsideClick = (event) => {
						if (!menu.contains(event.target)) {
							hideMenu()
						}
					}
					console.log('adding click event listener');
					document.addEventListener('click', handleOutsideClick)
					row.addEventListener('mouseleave', hideMenu)
				})
			})
		}

		function fetchWithFilter(url, filters) {
			let requestUrl = url
			if (filters.some((filter) => filter !== '')) {
				requestUrl += `?${filters.map((filter) => `filter=${filter}`).join('&')}`
			}
			return fetch(requestUrl).then((response) => response.json())
		}

		function filterTable(filters) {
			const tbody = table.querySelector('tbody')
			const rows = tbody.querySelectorAll('tr')
			rows.forEach((row) => {
				const cells = row.querySelectorAll('td')
				let matched = true
				cells.forEach((cell, index) => {
					const text = cell.textContent.trim().toLowerCase()
					if (text.indexOf(filters[index]) === -1) {
						matched = false
					}
				})
				if (matched) {
					row.classList.remove('hidden')
				} else {
					row.classList.add('hidden')
				}
			})
		}

		// 点击“模型管理”按钮发送请求，获取数据渲染表格
		modelBtn.addEventListener('click', function () {
			fetchWithFilter('/model', ['', '']).then((data) => {
				if (data.code === '200') {
					tableTitle.textContent = '模型管理'
					renderTable(data.msg, ['id', 'name', 'model', 'package', 'group'])
				} else {
					console.error('请求失败')
				}
			}).catch((error) => console.error(error))
		})

		// 点击“数据管理”按钮发送请求，获取数据渲染表格
		dataBtn.addEventListener('click', function () {
			fetchWithFilter('/data', ['', '']).then((data) => {
				if (data.code === '200') {
					tableTitle.textContent = '数据管理'
					renderTable(data.msg, ['id', 'name', 'group'])
				} else {
					console.error('请求失败')
				}
			}).catch((error) => console.error(error))
		})
	</script>
</body>

</html>